<form class="search-area">
  <mat-button-toggle-group appearance="legacy">
    <mat-button-toggle (click)="filterLine()" [checked]="!(filterLine$|async)">
      <span [matBadge]="(exceptionRecords$|async)?.length" matBadgeColor="accent" matBadgePosition="before">
        {{'Common.all'|translate}}
      </span>
    </mat-button-toggle>
    <mat-button-toggle (click)="filterLine(it)" *ngFor="let it of lines$|async" [checked]="(filterLine$|async)?.id===it.id">
      {{it.name}}
    </mat-button-toggle>
  </mat-button-toggle-group>

  <span fxFlex></span>
  <button (click)="create()" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>add</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<mat-table [dataSource]="exceptionRecords$" fxFlex>
  <ng-container matColumnDef="spec">
    <mat-header-cell *matHeaderCellDef>{{'LineMachine.spec'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.lineMachine.line.name}}-{{row.spindle}}/{{row.lineMachine.item}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="doffingNum">
    <mat-header-cell *matHeaderCellDef>{{'doffingNum'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.doffingNum}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="exception">
    <mat-header-cell *matHeaderCellDef>{{'Common.exception'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.exception.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="creator">
    <mat-header-cell *matHeaderCellDef>{{'提交人'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.creator.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="createDateTime">
    <mat-header-cell *matHeaderCellDef>{{'提交时间'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.createDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="btns">
    <mat-header-cell *matHeaderCellDef>{{'Common.operation'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row" [matMenuTriggerFor]="btnsMenu" matRipple>
      <mat-icon>list</mat-icon>
      <mat-menu #btnsMenu="matMenu">
        <button (click)="handle(row)" mat-menu-item type="button">
          {{'Common.handle'|translate}}
        </button>
        <button (click)="update(row)" *ngIf="isShow(row)|async" color="primary" mat-menu-item type="button">
          {{'Common.edit'|translate}}
        </button>
        <button (click)="delete(row)" *ngIf="isShow(row)|async" color="warn" mat-menu-item type="button">
          {{'Common.delete'|translate}}
        </button>
      </mat-menu>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
